<template>
	<view class="home">
		<view class="swiperbg">
			<ty-swiper-home :list="carousel" height='360' radius='0'></ty-swiper-home>
		</view>
		<view class="pagecont">
			<view class="flex align-center">
				<view class="haedbg">
					<image :src="men.avatar?men.avatar:'/static/board/head.png'" mode="" class="headimg"></image>
					<image src="/static/board/g-nan.png" mode="" class="seximg" v-if="men.gender==1"></image>
					<image src="/static/board/g-nv.png" mode="" class="seximg" v-if="men.gender==0"></image>
				</view>
				<view class="flex-one margin-left-20">
					<view class="text-32 text-bold">{{men.nickname}}</view>
					<view class="flex align-center margin-top-10">
						<image src="/static/board/logo.png" mode="" class="logoimg"></image>
						<view class="text-28 text-bold margin-left-5">{{men.level_name}}</view>
						<view class="text-24 text-be margin-left-20" @click="go('/pages/board/member')">查看权益 <text
								class="tyIcon-arrow-right text-20 text-be"></text></view>
					</view>
				</view>
				<view class="text-28 margin-left-20 flex align-center" @click="is_store_show=true">
					<view class="width-230 text-cut-one">{{shopname?shopname:'请选择'}} </view> <text class="tyIcon-arrow-right text-24"></text>
				</view>
			</view>
			<view class="orderbg flex align-center">
				<view class="flex-one flex align-center flex-direction position-relative height-100p"
					style="bottom: 12rpx;" @click="go('/pages/board/make')">
					<image src="/static/board/timyy.png" mode="" class="orderimg"></image>
					<view class="text-36 text-bold margin-top-15">预约</view>
					<view class="text-24 text-97 margin-top-10">提前预约免排队</view>
				</view>
				<view class="order-line"></view>
				<view class="flex-one flex align-center flex-direction position-relative height-100p"
					style="bottom: 16rpx;" @click="go('/pages/board/table')">
					<image src="/static/board/pz.png" mode="" class="orderimg"></image>
					<view class="text-36 text-bold margin-top-15">现场拼桌</view>
					<view class="text-24 text-97 margin-top-10">拼桌组队更快乐</view>
				</view>
			</view>
			<view class="groupbg flex align-center justify-around">
				<view class="groupbtn" @click="go('/pages/shop/mall')">
					<image src="/static/board/group.png" mode="" class="group1"></image>
					<view class="text-28 margin-top-20">会员商城</view>
					<view class="text-20 text-97 margin-top-5">会员商城</view>
				</view>
				<view class="groupbtn_active" @click="gobook">
					<image src="/static/board/group2.png" mode="" class="group1"></image>
					<view class="text-28 margin-top-20">点单</view>
					<view class="text-20 text-97 margin-top-5">立即下单</view>
				</view>
				<view class="groupbtn">
					<image src="/static/board/group3.png" mode="" class="group1" @click="go('/pages/game/demonstore')">
					</image>
					<view class="text-28 margin-top-20" @click="go('/pages/game/demonstore')">
						{{men.score?men.score:'0'}}妖币<text class="tyIcon-arrow-right text-24"></text>
					</view>
					<view class="text-20 text-97 margin-top-5" @click="go('/pages/game/signdetails')">妖币明细</view>
				</view>
			</view>
			<view class="margin-top-40 flex align-end justify-around">
				<view class="flex align-center flex-direction" @click="go('/pages/board/gamelist')">
					<image src="/static/board/cate1.png" mode="" class="cate1"></image>
					<view class="text-24 margin-top-5">游戏目录</view>
				</view>
				<view class="flex align-center flex-direction" @click="go('/pages/game/newsgame')">
					<image src="/static/board/cate2.png" mode="" class="cateimg"></image>
					<view class="text-24 margin-top-5">新游体验</view>
				</view>
				<view class="flex align-center flex-direction" @click="go('/pages/game/sign')">
					<image src="/static/board/cate3.png" mode="" class="cateimg"></image>
					<view class="text-24 margin-top-5">签到有礼</view>
				</view>
				<view class="flex align-center flex-direction" @click="go('/pages/my/coupon')">
					<image src="/static/board/cate4.png" mode="" class="cateimg"></image>
					<view class="text-24 margin-top-5">权益中心</view>
				</view>
				<view class="flex align-center flex-direction" @click="go('/pages/my/wishbox')">
					<image src="/static/board/cate5.png" mode="" class="cateimg"></image>
					<view class="text-24 margin-top-5">心愿箱</view>
				</view>
			</view>
			<view class="flex align-center justify-between margin-top-40">
				<view class="flex flex-direction">
					<view class="flex">
						<view class="text-32 text-bold position-relative">
							活动
							<image src="/static/board/xing.png" mode="" class="xingimg"></image>
						</view>
					</view>
					<image src="/static/board/line.png" mode="" class="lineimg"></image>
				</view>
				<view class="text-26 text-66" @click="go('/pages/board/activitylist')">更多 <text
						class="tyIcon-arrow-right text-24"></text></view>
			</view>
			<view class="activebg margin-top-35">
				<ty-swiper-home :list="activelist" height='316' radius='50' :listKey="listKey"
					@clickImg="clickImg"></ty-swiper-home>
			</view>
		</view>
		<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="phonebtn" v-if="isauthen"></button>
		<ty-tab-bar :tabnumber="'1'"></ty-tab-bar>
		<!-- 有未支付订单 -->
		<view class="layer flex align-center justify-center flex-direction" v-if="is_pay_show" @click="getqguan">
			<view class="layer_cancel" @click.stop>
				<view class="text-34 text-bold text-center" style="padding-top: 64rpx;">因你还有未结帐的订单，</view>
				<view class="text-34 text-bold text-center">需结帐后才能拼桌</view>
				<view class="margin-top-25 flex border-top-ed">
					<view class="flex-one border-right-ed text-32 text-bold text-66 text-center line-height-90"
						@click="getqguan">取消</view>
					<view class="flex-one text-bold text-32 text-center line-height-90" @click="goJz">去结账
					</view>
				</view>
			</view>
		</view>
		<!-- 切换门店浮层 -->
		<view class="layer flex flex-direction justify-end" v-if="is_store_show" @click="is_store_show=false">
			<view class="layerstore" @click.stop>
				<view class="flex align-center padding-top-45 padding-lr-25">
					<view class="flex-one text-32">请选择门店</view>
					<view class="cuIcon-close text-bold" @click="is_store_show=false"></view>
				</view>
				<scroll-view scroll-y="true" style="height: 930rpx;margin-top: 30rpx;">
					<view class="bg-ff radius-40 padding-20 flex margin-bottom-40 bg-shadow margin-lr-30"
						v-for="(item,index) in list" :key="index">
						<image :src="item.image" mode="" class="listimg"></image>
						<view class="flex-one margin-left-30">
							<view class="text-32">{{item.name}}</view>
							<view class="flex align-center margin-top-10">
								<image src="/static/board/phone.png" mode="" class="phoneimg"></image>
								<view class="text-28 text-66 margin-left-10">{{item.tel}}</view>
							</view>
							<view class="flex align-center margin-top-10 ">
								<image src="/static/board/adres.png" mode="" class="phoneimg"></image>
								<view class="text-28 text-66 text-cut-one margin-left-10 flex-one">{{item.address}}
								</view>
							</view>
							<view class="flex justify-between align-center margin-top-40">
								<view class="jlbtn text-cut-one">离你{{item.distance}}</view>
								<view class="listbtn" @click="choseStore(item)">
									选择
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				carousel: [], //顶部轮播
				activelist: [],
				isauthen: false,
				men: "",
				listKey: 'image_url',
				bookid: "",
				is_pay_show: false,
				pzid: "",
				list: [],
				is_store_show: false,
				shopname: ''
			}
		},
		onLoad(options) {
			uni.getLocation({
				type: 'gcj02',
				success: function(res) {
					uni.setStorageSync('lat', res.latitude)
					uni.setStorageSync('lng', res.longitude)
				},
				fail: function(res) {
					console.log(res, '失败');
				}
			})
			if (options.scene) {
				console.log(options.scene,'1111')
				console.log(options.scene.split('_'))
				let lampid = options.scene.split('_')[0]
				let shopid = options.scene.split('_')[1]
				uni.setStorageSync('store_id', shopid)
				uni.setStorageSync('lampid', lampid)
				this.rq.getData('shop/getShop', {
					id: shopid
				}).then(res => {
					if (res.code == 1) {
						this.shopname = res.data.name
						uni.setStorageSync('shop_name', res.data.name)
					}
				})
				this.rq.getData('order/order_in_id', {
					lights: lampid
				}).then(res => {
					if (res.code == 1) {
						if (res.data.in == 0) {
							uni.navigateTo({
								url: '/pages/board/orderlist'
							})
						} else if (res.data.in == 1) {
							if (res.data.status == 0) {
								uni.navigateTo({
									url: '/pages/board/orderdetail?id=' + res.data.id + '&type=2'
								})
							} else if (res.data.status == 1) {
								this.pzid = res.data.id
								this.is_pay_show = true
							}

						}
					}
				})
				this.loadList(1)
			} else {
				this.loadList(1)
				if (uni.getStorageSync('store_id')) {
					this.shopname = uni.getStorageSync('shop_name')
				} else {
					var that = this
					//获取位置
					uni.getLocation({
						type: 'gcj02',
						success: function(res) {
							uni.setStorageSync('lat', res.latitude)
							uni.setStorageSync('lng', res.longitude)
							that.loadList(1)
							that.rq.getData('shop/getShop', {
								latitude: res.latitude,
								longitude: res.longitude
							}).then(res => {
								if (res.code == 1) {
									that.shopname = res.data.name
									uni.setStorageSync('store_id', res.data.id)
									uni.setStorageSync('shop_name', res.data.name)
								}
							})
						},
						fail: function(res) {
							console.log(res, '失败');
						}
					})
				}

			}
		},
		onReady() {
			this.rq.getData('common/banner', {
				type: 0
			}).then(res => {
				if (res.code == 1) {
					this.carousel = res.data
				}
			})
			this.getHot()
		},
		onShow() {
			if (uni.getStorageSync('iv')) {
				this.isauthen = false
				this.getMen()
				this.rq.getData('shop/light_code', {
					light_id: uni.getStorageSync('lampid')
				}).then(res => {
					if (res.code == 1) {
						this.bookid = res.data.id ? res.data.id : 0
					}
				})
			} else {
				this.isauthen = true
			}

		},
		methods: {
			getMen() {
				this.rq.getData('Wechat/user_info').then(res => {
					if (res.code == 1) {
						this.men = res.data
					}
				})
			},
			//手机号授权
			getPhoneNumber(e) {
				console.log(e)
				var that = this
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					uni.login({
						provider: 'alipay',
						scopes: ['auth_base'],
						success: function(loginRes) {
							console.log(loginRes)
							that.rq.getData('wechat/login', {
								encryptedData: e.detail.encryptedData,
								code: loginRes.code,
								iv: e.detail.iv,
							}).then((res) => {
								if (res.code == 1) {
									that.isauthen = false
									uni.setStorageSync('iv', true)
									uni.setStorageSync('token', res.data.token)
									that.getMen()
								}
							})
						}
					})

				}
			},
			clickImg(e) {
				console.log(e)
				uni.navigateTo({
					url: '/pages/board/activdetail?id=' + this.activelist[e].id
				})
			},
			gobook() {
				if (this.bookid == 0) {
					uni.navigateTo({
						url: '/pages/board/reser'
					})
				} else {
					uni.navigateTo({
						url: '/pages/board/book?id=' + this.bookid
					})
				}
			},
			getqguan() {
				this.is_pay_show = !this.is_pay_show
			},
			goJz() {
				uni.navigateTo({
					url: '/pages/board/orderdetail?id=' + this.pzid + '&type=2'
				})
			},
			loadList(isFirstPage) {
				var that = this
				that.rq.getList('shop/shop_list', {
					latitude: uni.getStorageSync('lat'),
					longitude: uni.getStorageSync('lng')
				}, {
					that: that,
					first_page: isFirstPage
				})
			},
			choseStore(item) {
				console.log(item)
				uni.setStorageSync('store_id', item.id)
				uni.setStorageSync('shop_name', item.name)
				this.shopname = item.name
				this.is_store_show = false
				this.getHot()
			},
			getHot() {
				this.rq.getData('Activitie/hot_activitie', {
					type: 0,
					shop_id: uni.getStorageSync('store_id'),
				}).then(res => {
					if (res.code == 1) {
						this.activelist = res.data
					}
				})
			}
		}
	}
</script>

<style>
	.home {
		width: 100%;
		min-height: 100vh;
		background: #2F2F2F;
		/* padding-bottom: 30rpx; */
	}

	.swiperbg {
		width: 100%;
		height: 360rpx;
	}

	.pagecont {
		width: 100%;
		min-height: calc(100vh - 360rpx);
		background: #fff;
		border-radius: 50rpx 50rpx 0rpx 0rpx;
		padding: 80rpx 30rpx 288rpx;
		position: relative;
		top: -50rpx;
		z-index: 99;

	}

	.haedbg {
		width: 106rpx;
		height: 106rpx;
		position: relative;
	}

	.headimg {
		width: 106rpx;
		height: 106rpx;
		border-radius: 50%;
		position: relative;
		top: 0;
	}

	.seximg {
		width: 32.23rpx;
		height: 32.23rpx;
		position: absolute;
		top: -5rpx;
		right: 0;
	}

	.logoimg {
		width: 36rpx;
		height: 32rpx;
	}



	.orderbg {
		width: 100%;
		height: 198rpx;
		background: #F8F8F8;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		margin-top: 52rpx;
	}

	.order-line {
		width: 0rpx;
		height: 108rpx;
		border: 2rpx solid #DBDBDB;
	}

	.orderimg {
		width: 80rpx;
		height: 80rpx;
	}

	.groupbg {
		width: 100%;
		height: 292rpx;
		background: #F8F8F8;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		margin-top: 40rpx;
	}

	.groupbtn {
		width: 206rpx;
		height: 240rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
	}

	.group1 {
		width: 52rpx;
		height: 52rpx;

	}

	.groupbtn_active {
		width: 206rpx;
		height: 240rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		background: #ECECEC;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
	}

	.xingimg {
		width: 20rpx;
		height: 20rpx;
		position: absolute;
		top: -5rpx;
		right: -25rpx;
	}

	.lineimg {
		width: 76rpx;
		height: 10rpx;
	}

	.cate1 {
		width: 106.67rpx;
		height: 88.56rpx;
	}

	.cateimg {
		width: 106.67rpx;
		height: 78.96rpx;
	}

	.activebg {
		width: 100%;
		height: 316rpx;
	}

	.phonebtn {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
	}

	.layer {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.layerbg {
		width: 540rpx;
		/* height: 418rpx; */
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-top: 400rpx;
		padding-top: 35rpx;
	}

	.layer_cancel {
		width: 540rpx;
		height: 270rpx;
		background: #fff;
		border-radius: 16rpx;
		box-shadow: inset 0rpx -1rpx 0rpx 0rpx #E5E6EB;
	}

	.layerstore {
		width: 100%;
		height: 1060rpx;
		background: #FEFEFE;
		border-radius: 50rpx 50rpx 0rpx 0rpx;
	}

	.listimg {
		width: 226rpx;
		height: 226rpx;
		border-radius: 40rpx;
	}

	.phoneimg {
		width: 28rpx;
		height: 28rpx;
	}

	.jlbtn {
		max-width: 50%;
		font-size: 24rpx;
		color: #999999;
		line-height: 50rpx;
		height: 50rpx;
		padding: 0 15rpx;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		border: 2rpx solid #999999;
	}

	.listbtn {
		width: 174rpx;
		height: 60rpx;
		background: #101010;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 60rpx;
	}
	.width-230{
		width: 230rpx;
	}
</style>